<template>
  <div>
    <div>
      <!-- 导入按钮 -->
      <!-- 导出按钮 -->
      <el-button type="success" size="small" @click="handleExport">
        导出
      </el-button>
      <el-button type="primary" size="small" @click="handleShowImportDialog">
        导入
      </el-button>
    </div>
    <!-- 懒加载树形图表格 -->
    <div>
      <el-table
        :data="list"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="imageUrl" label="图标" #default="scope">
          <img
            v-if="scope.row.imageUrl"
            :src="scope.row.imageUrl"
            style="width:30px;height:30px"
          />
        </el-table-column>
        <el-table-column prop="orderNum" label="排序" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </div>

    <!-- 导入excel文件的对话框：包含了上传组件 -->
    <el-dialog v-model="dialogImportVisible" title="导入" width="40%">
      <el-form label-width="120px">
        <el-form-item label="分类文件">
          <el-upload
            class="upload-demo"
            :action="uploadPath"
            name="excel"
            :on-success="onUploadSuccess"
            :headers="headers"
          >
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GetCategoriesByPid, ExportCategoriesExcel } from '@/api/category'
import { ElMessage } from 'element-plus'
import { useApp } from '@/pinia/modules/app'
//===导入对话框
let dialogImportVisible = ref(false)
let uploadPath = ref('http://localhost:8501/admin/product/category/importCates')
let headers = ref({ token: useApp().authorization.token })
//导入成功回调
let onUploadSuccess = response => {
  //上传后服务器返回结果时的回调:
  if (+response.code === 200) {
    //上传成功
    ElMessage.success('上传成功')
    fetchData(0)
  } else {
    ElMessage.error(response.message)
  }
  //关闭对话框
  dialogImportVisible.value = false
}
//导入按钮事件函数
let handleShowImportDialog = () => {
  dialogImportVisible.value = true
}

//导出分类数据excel 按钮事件函数
let handleExport = () => {
  ExportCategoriesExcel().then(response => {
    // 将响应体文件转为blob对象
    let blob = new Blob([response])
    //创建超链接，让浏览器访问超链接触发下载操作，下载的文件为上面的blob文件
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    // 设置下载文件的名称
    link.download = '分类数据.xlsx'
    // 模拟点击下载链接
    link.click()
  })
}

//分类数据集合
let list = ref([])
//获取分类数据列表
let fetchData = async pid => {
  const { data } = await GetCategoriesByPid(pid)
  list.value = data
  // console.log(list.value)
}
//懒加载函数
let load = async (row, treeNode, resolve) => {
  //resolve可以将数据渲染到点击行下面
  // console.log(row.id)
  //提交异步请求查询 点击行分类的子分类集合
  const { data } = await GetCategoriesByPid(row.id)
  //将data展示到当前行的下面
  resolve(data)
}

onMounted(() => {
  //await只对当前作用域代码块阻塞，代码块外的内容不会阻塞
  fetchData(0)

  // console.log(list.value)
})
</script>
